<template>
  <div class="container">
    <Breadcrumb :items="['menu.form', 'menu.form.step']" />
    <a-spin :loading="loading" style="width: 100%">
      <!-- <a-card class="general-card">
        <template #title>
          {{ $t('stepForm.step.title') }}
        </template>
        <div class="wrapper">
          <a-steps
            v-model:current="step"
            style="width: 580px"
            line-less
            class="steps"
          >
            <a-step :description="$t('stepForm.step.subTitle.baseInfo')">
              {{ $t('stepForm.step.title.baseInfo') }}
            </a-step>
            <a-step :description="$t('stepForm.step.subTitle.channel')">
              {{ $t('stepForm.step.title.channel') }}
            </a-step>
            <a-step :description="$t('stepForm.step.subTitle.finish')">
              {{ $t('stepForm.step.title.finish') }}
            </a-step>
          </a-steps>
          <keep-alive>
            <ChooseQuestionType v-if="step === 1" @change-step="changeStep" />
            <ChoiceQuestion v-else-if="step === 2" @change-step="changeStep" />
            <Success v-else-if="step === 3" @change-step="changeStep" />
          </keep-alive>
        </div>
      </a-card> -->

      <a-card>
        <a-form
          :model="modelForm"
          :style="{ width: '600px' }"
          :rule="rules"
          @submit="handleSubmit"
        >
          <!-- <vuedraggable v-model="modelForm.topic" item-key="index" class="wrapper" @end="end"> -->
          <div v-for="(item, index) in modelForm.topic" :key="index">
            <a-collapse default-active-key="1">
              <a-collapse-item header="题目" key="1">
                <template #item="index">
                  第{{ index + 1 }}题,题目:{{ item.questionName }}
                </template>
                <a-form-item
                  :field="`topic.${index}.type`"
                  :label="`问题${index + 1}类型`"
                  :rules="{
                    required: true,
                    message: '请选择问题类型',
                    trigger: 'change',
                  }"
                >
                  <a-radio-group v-model="item.type">
                    <a-radio :value="0">单选</a-radio>
                    <a-radio :value="1">多选</a-radio>
                    <a-radio :value="2">填空</a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item
                  :field="`topic.${index}.questionName`"
                  :label="问题"
                  :rules="{
                    required: true,
                    message: '请填写问题',
                    trigger: 'change',
                  }"
                >
                  <a-input
                    v-model.trim="item.questionName"
                    :style="{ width: '258px' }"
                    placeholder="请填写问题"
                    allow-clear
                  />
                </a-form-item>
                <!-- 答案 -->
                <template v-if="item.type != 2">
                  <a-form-item
                    v-for="(opt, idx) in item.answers"
                    :key="idx"
                    :label="`选项${idx + 1}`"
                    :field="`topic.${index}.answers.${idx}.value`"
                    :rules="[
                      {
                        required: true,
                        message: '请输入答案',
                        trigger: 'blur',
                      },
                    ]"
                  >
                    <a-input
                      v-model.trim="opt.value"
                      :style="{ width: '258px' }"
                      placeholder="请输入答案"
                      allow-clear
                    />
                    <a-button
                      style="margin-left: 20px"
                      type="text"
                      @click.prevent="removeDomain(index, idx)"
                      >删除</a-button
                    >
                  </a-form-item>
                </template>

                <a-form-item>
                  <a-button v-show="item.type != 2" @click="addDomain(index)"
                    >新增选项</a-button
                  >
                  <a-button @click="removeQuestion(index)">删除题目</a-button>
                </a-form-item>
              </a-collapse-item>
            </a-collapse>
          </div>
          <!-- </vuedraggable> -->
          <a-form-item>
            <a-button @click="addQuestion">新增题目</a-button>
            <a-button style="margin-left: 10px" @click="addSubmit()"
              >提交</a-button
            >
          </a-form-item>
        </a-form>
      </a-card>
    </a-spin>
  </div>
</template>

<script lang="ts" setup>
  import useLoading from '@/hooks/loading';
  import {
    submitChannelForm,
    BaseInfoModel,
    ChannelInfoModel,
    UnitChannelModel,
  } from '@/api/form';
  import vuedraggable from 'vuedraggable';
  import { ref, reactive } from 'vue';

  import BaseInfo from './components/base-info.vue';
  import ChannelInfo from './components/channel-info.vue';
  import Success from './components/success.vue';
  import ChooseQuestionType from './components/choose-question-type.vue';
  import ChoiceQuestion from './components/choice-question.vue';

  // components:{ vuedraggable }
  const rules = {};

  const modelForm = reactive({
    topic: [
      {
        type: '',
        questionName: '',
        answers: [{ value: '' }],
      },
      {
        type: '',
        questionName: '',
        answers: [{ value: '' }],
      },
    ],
  });
  // const end(e) = {
  //   $refs.modelForm.clearValidate()
  // }
  const removeDomain = (index, idx) => {
    modelForm.topic[index].answers.splice(idx, 1);
  };
  const addDomain = (index) => {
    modelForm.topic[index].answers.push({ value: '' });
  };
  const addSubmit = () => {
    modelForm.validate((valid) => {
      if (valid) {
        console.log(modelForm.topic);
      }
    });
  };
  const removeQuestion = (index) => {
    modelForm.topic.splice(index, 1);
  };
  const addQuestion = () => {
    modelForm.topic.push({
      type: '',
      questionName: '',
      answers: [{ value: '' }],
    });
  };
</script>

<script lang="ts">
  export default {
    name: 'Step',
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 20px 20px;
  }

  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 0;
    background-color: var(--color-bg-2);

    :deep(.arco-form) {
      .arco-form-item {
        &:last-child {
          margin-top: 20px;
        }
      }
    }
  }

  .steps {
    margin-bottom: 76px;
  }
</style>
